<template>
	<view class="feedback">
		<view class="feedback-form-box">
			<view class="">
				<view class="fw-b font-s-15">请填写以下投诉信息</view>
				<view class="mar-t-15 color-999 font-s-12 line-height-44">为提高用户体验，我们将重视每一份用户提交的信息，请填写信息帮助我们明确问题。</view>
			</view>
			<view class="">
				<view class="fw-b font-s-15">反馈类型</view>
				<view class="mar-t-15 input-box">
					<u-input @click="typeShow=true" :value="$common.selectDictLabel(typeOptions,form.type)" type="select" placeholder="请选择反馈类型"></u-input>
				</view>
			</view>
			<view class="">
				<view class="fw-b font-s-15">反馈内容</view>
				<view class="mar-t-15 input-box">
					<u-input v-model="form.content" type="textarea" height="200" maxlength="200" placeholder="请输入反馈内容"></u-input>
				</view>
			</view>
			<view class="">
				<view class="fw-b font-s-15">相关图片</view>
				<view class="mar-t-15">
					<image-upload v-model="form.url"></image-upload>
				</view>
			</view>
		</view>
		<view class="footer-btn flex-between-center">
			<view><u-button :ripple="true" shape="circle" @click="$common.navigator('/pagesA/feedback/list')" type="primary" :custom-style="{background:'#F5F7FA',color:'#1F1F1F',fontSize:'32rpx',fontWeight:'bold',width:'240rpx',height:'90rpx',letterSpacing: '8rpx'}">反馈记录</u-button></view>
			<view><u-button shape="circle" @click="confirm()" type="primary" :custom-style="{background:'#3385FF',fontSize:'32rpx',fontWeight:'bold',width:'440rpx',height:'90rpx',letterSpacing: '8rpx'}">确认提交</u-button></view>
		</view>
		<u-select title="选择反馈类型" v-model="typeShow" value-name="dictValue" label-name="dictLabel" :list="typeOptions" @confirm="typeConfirm"></u-select>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				typeOptions:[],
				form:{
					type: '',
					content:'',
					url:'',
				},
				typeShow:false
			}
		},
		onLoad() {
			this.getDicts()
		},
		methods: {
			getDicts(){
				this.$request({
					url: '/system/dict/data/type/feedback_type',
					method: 'get'
				}).then(res => {
					this.typeOptions = res.data
				})
			},
			typeConfirm(e){
				this.form.type = e[0].value
			},
			confirm(){
				if(!this.form.type){
					this.$u.toast('请选择反馈类型')
				}else if(!this.form.content){
					this.$u.toast('请输入反馈内容')
				}else{
					uni.showLoading({
						mask:true
					})
					this.$request({
						url: '/loginUserInfo/addUserFeedback',
						method: 'post',
						data:this.form
					}).then(res => {
						if(res.code==200){
							this.$u.toast('提交成功')
							setTimeout(()=>{
								uni.redirectTo({
									url:'/pagesA/feedback/list'
								})
							},1200)
						}
					})
				}
			},
		}
	}
</script>
<style>
	page{
		background: #fff;
	}
</style>
<style lang="scss" scoped>
	.feedback {
		padding-bottom: calc(148rpx + constant(safe-area-inset-bottom));///兼容 IOS<11.2/
		padding-bottom: calc(148rpx + env(safe-area-inset-bottom));///兼容 IOS>11.2/
		.feedback-form-box{
			padding: 0 24rpx 48rpx;
			background: #FFFFFF;
			border-radius: 28rpx 28rpx 0px 0px;
			position: relative;
			z-index: 99;
			>view{
				padding: 24rpx 0;
				.input-box{
					background: #F5F7FA;
					border-radius: 16rpx;
					padding: 12rpx 24rpx;
				}
			}
		}
	}
</style>